import React from "react";
import { Input as FormilyInput } from "../../packages/formily-antd-v5/src";
import {
  createBehavior,
  createResource,
} from "../../packages/designable-core/src";
import { DnFC } from "../../packages/designable-react/src";
import { createFieldSchema } from "../Field";
import { AllSchemas } from "../../schemas";
import { AllLocales } from "../../locales";

export const Input: DnFC<React.ComponentProps<typeof FormilyInput>> =
  FormilyInput;

Input.Behavior = createBehavior(
  {
    name: "Input",
    extends: ["Field"],
    selector: (node) => node.props["x-component"] === "Input",
    designerProps: {
      propsSchema: createFieldSchema(AllSchemas.Input),
    },
    designerLocales: AllLocales.Input,
  },
  {
    name: "Input.TextArea",
    extends: ["Field"],
    selector: (node) => node.props["x-component"] === "Input.TextArea",
    designerProps: {
      propsSchema: createFieldSchema(AllSchemas.Input.TextArea),
    },
    designerLocales: AllLocales.TextArea,
  }
);

Input.Resource = createResource(
  "Inputs",
  {
    icon: "InputSource",
    elements: [
      {
        componentName: "Field",
        props: {
          type: "string",
          title: "Input",
          "x-decorator": "FormItem",
          "x-component": "Input",
        },
      },
    ],
  },
  {
    icon: "TextAreaSource",
    elements: [
      {
        componentName: "Field",
        props: {
          type: "string",
          title: "TextArea",
          "x-decorator": "FormItem",
          "x-component": "Input.TextArea",
        },
      },
    ],
  }
);
